<!-- 菜单悬浮的原理: 通过给菜单添加position:sticky实现, 用法超简单, 仅APP端的低端机不兼容 https://caniuse.com/#feat=css-sticky -->
<template>
	<view>
		<!-- 对于mescroll-body: 需设置:sticky="true", 此应避免在mescroll-body标签前面加其他非定位的元素, 否则下拉区域会被挤出, 无法会隐藏.-->
		<!-- 对于mescroll-uni: 则无需设置:sticky="true", 无其他限制和要求 -->
		<mescroll-body :sticky="true" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<!-- sticky吸顶悬浮的菜单, 父元素必须是 mescroll -->

			<view class="sticky-tabs" :style="isShow">
				<me-tabs v-model="tabIndex" :tabs="pareTabs" @change="pareTabChange">
				</me-tabs>
			</view>

			<view class="sticky-tabs">
				<me-tabs v-model="subTabIndex" :tabs="tabs" @change="tabChange"></me-tabs>
			</view>

			<!-- /**
				 * 订单的状态：
				 * '1'：待确认（用户下订单后，等待陪玩方处理）
				 * '2'：进行中（陪玩方已经接受，正在服务中）
				 * '3'：已服务（陪玩方完成服务，等待买方用户确定已服务）
				 * '4'：已取消（陪玩方超时处理或拒绝、买方用户取消订单）
				 * '5'：已完成（买方用户确定已服务）
				 * 'n'：已删除（买方删除订单）
				 */ -->
			<!-- 数据列表 -->
			<view class="margin-sm padding-sm bg" v-for="(item,index) in goods" @click="goDetail(item.id) ">
				<view class="flex justify-between">
					<!-- pTabNum：0 服务我的 -->
					<view class="text-blue" v-if="item.state=='1' && pTabNum=='0'">待接受</view>
					<view class="text-blue" v-if="item.state=='2' && pTabNum=='0'">进行中</view>
					<view class="text-blue" v-if="item.state=='3' && pTabNum=='0'">已服务</view>
					<view class="text-blue" v-if="item.state=='4' && pTabNum=='0'">已取消</view>
					<view class="text-blue" v-if="item.state=='5' && pTabNum=='0'">已完成</view>
					<view class="text-blue" v-if="item.state=='n' && pTabNum=='0'">已删除</view>
					<!-- pTabNum：1 我服务的 -->
					<view class="text-blue" v-if="item.state=='1' && pTabNum=='1'">新订单</view>
					<view class="text-blue" v-if="item.state=='2' && pTabNum=='1'">进行中</view>
					<view class="text-blue" v-if="item.state=='3' && pTabNum=='1'">已服务</view>
					<view class="text-blue" v-if="item.state=='4' && pTabNum=='1'">已取消</view>
					<view class="text-blue" v-if="item.state=='5' && pTabNum=='1'">已完成</view>
					<!-- 展示时间 -->
					<view class="text-white">{{item.buyTime}}</view>
				</view>
				<view class=" u-flex u-p-t-30">
					<view class="u-m-r-10">
						<!-- 看用户订单时，订单中展示陪玩的头像 -->
						<u-avatar v-if="pTabNum=='0'" :src="item.pwAvr" mode="square" size="100"></u-avatar>
						<!-- 看用户订单时，订单中展示商品的头像 -->
						<u-avatar v-if="pTabNum=='1'" :src="item.categoryImg" mode="square" size="100"></u-avatar>
					</view>
					<view class="u-flex-1 text-white margin-left-xs">
						<view class="u-font-14 u-tips-color flex justify-between">
							<view class="text-white">{{item.categoryName}}/{{item.num}}局</view>
							<view class="text-white">
								实付: <text class="text-lg">{{(item.money*item.num).toFixed(2)}}币</text>
							</view>
						</view>

					</view>
				</view>

				<view class="flex justify-end u-p-t-20">
					<!-- pTabNum：1 我服务的 -->
					<!-- （1）新订单 -->
					<u-button v-if="item.state=='1' && pTabNum=='1'" class="margin-right-sm" :custom-style="customStyle"
						shape="circle" :plain="true" @click="acceptOrder(item.id)">接受</u-button>
					<u-button v-if="item.state=='1' && pTabNum=='1'" class="margin-right-sm" :custom-style="customStyle"
						shape="circle" :plain="true" @click="refuseOrder(item.id)">拒绝</u-button>
					<!-- （2）进行中 -->
					<u-button v-if="item.state=='2' && pTabNum=='1'" class="margin-right-sm" :custom-style="customStyle"
						shape="circle" :plain="true" @click="finishServe(item.id)">完成服务</u-button>

					<!-- （3）已服务 -->
					<view class="u-font-14 u-tips-color flex justify-between" v-if="item.state=='3' && pTabNum=='1'">
						<view class="text-white"></view>
						<view class="text-white">
							<text class="text-lg">等待用户确认服务中...</text>
						</view>
					</view>

					<!-- pTabNum：0 服务我的 -->
					<!-- （1）待接受 -->
					<view class="u-font-14 u-tips-color flex justify-between" v-if="item.state=='1' && pTabNum=='0'">
						<view class="text-white"></view>
						<view class="text-white">
							<text class="text-lg">等待陪玩接单中...</text>
						</view>
					</view>
					<!-- （2）进行中 -->

					<!-- （3）已完成 -->
					<u-button v-if="item.state=='3' || item.state=='5'" class="margin-right-sm" :custom-style="customStyle"
						shape="circle" :plain="true" @click="gotoComment(item.id)">评价</u-button>
					<u-button v-if="item.state=='3' && pTabNum=='0'" class="margin-right-sm" :custom-style="customStyle"
						shape="circle" :plain="true" @click="confirmOrder(item.id)">确定已服务</u-button>




					<!-- 	<u-button :custom-style="customStyle" shape="circle" :plain="true" @click="goNav('/my/order/pay')">
						去支付</u-button> -->
				</view>
			</view>
			<view v-if="goods.length === 0" style="color: white;text-align: center;margin-top: 40rpx;">
				<text>暂无数据</text>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import mescrollBody from "@/components/mescroll-uni/components/mescroll-body/mescroll-body.vue";
	import meTabs from "@/components/mescroll-uni/me-tabs/me-tabs.vue";

	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			mescrollBody,
			meTabs,
			// orderList
		},
		data() {
			return {
				isShow: 'display: none;',
				goods: [], // 数据列表
				pareTabs: '',
				tabs: [{
						title: '全部订单',
						status: '0'
					}, {
						title: '待付款',
						status: '1'
					},
					{
						title: '进行中',
						status: '2'
					}, {
						title: '已完成',
						status: '3'
					}
				],
				tabIndex: 0, // 父tab选项卡的初始下标
				subTabIndex: 0, // 子tab选项卡的初始下标
				pTabNum: 0, //tab选项卡的动态下标，0：服务我的，1：我服务的
				subTabNum: 0, //子tab选项卡的动态下标，0：全部菜单，1：新订单（我服务的）或待确认（服务我的） 2：进行中 3：已服务（我服务的）或已完成（服务我的）
				page: {
					num: 1,
					size: 7,
				},
				limit: 10,
				userId: 0,
				status: 1,
				nickName: '',
				authPw: '',
				avatar: '',
				customStyle: {
					color: '#1789FD',
					backgroundColor: '#1E1F31',
					border: "4px",
					width: '180upx',
					height: '54upx',
					margin: "0 0 0 20upx"
				}
			}
		},
		onLoad(option) {
			//从本地缓存中取出存储的用户id，用户的陪玩认证，并且进行判断,由于没有登录，所里这里暂时写死
			// this.userId = uni.getStorageSync('userId');
			// this.authPw = uni.getStorageSync('authPw');

			this.userId = option.id;
			this.authPw = 'y';

			//(认证是陪玩的情况下，显示两个父选项卡)
			if (this.authPw.toLowerCase() == 'y') {
				this.pareTabs = [{
						title: '服务我的',
						status: '0'
					},
					{
						title: '我服务的',
						status: '1'
					},
				];
				this.isShow = '';
			}
			//(认证不是陪玩的情况下，取消两个父选项卡的显示)
			else {

				this.isShow = 'display: none;';
			}

			this.getOrder(this.pTabNum, this.subTabNum);
		},
		onShow() {
			this.mescroll.resetUpScroll();
			this.getOrder(0, 0);
		},
		methods: {
			/*下拉刷新的回调 */
			downCallback() {
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.optDown.use = false
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				let curTab = this.tabs[this.tabIndex].status

				let data = {
					userId: this.userId,
					status: curTab,
					page: page.num,
					limit: page.size
				}

				this.mescroll.endErr();
				// });
			},
			//跳转订单详情页面
			goDetail(id) {
				console.log("开始跳转订单详情页")
				uni.navigateTo({
					url: 'detail?id=' + id,
					fail(error) {
						console.log(error)
					}
				})
			},
			// 切换父菜单
			pareTabChange(e) {
				//(1)我服务的
				if (e == 1) {
					this.tabs = [{
							title: '全部订单',
							status: '1'
						}, {
							title: '新订单',
							status: '2'
						},
						{
							title: '进行中',
							status: '3'
						}, {
							title: '已服务',
							status: '4'
						}
					]
					//设置父选项卡初始值
					this.pTabNum = 1;
					console.log('我服务的');
				}
				//(2)服务我的
				else {
					this.tabs = [{
							title: '全部订单',
							status: '2'
						}, {
							title: '待接受',
							status: '3'
						},
						{
							title: '进行中',
							status: '4'
						}, {
							title: '已完成',
							status: '5'
						}
					]
					//设置父子选项卡初始值
					this.pTabNum = 0;
					console.log('服务我的');
				}

				this.getOrder(this.pTabNum, this.subTabNum);

			},
			// 切换子菜单
			tabChange(e) {
				/**
				 * 订单的状态：
				 * '1'：待确认（用户下订单后，等待陪玩方处理）
				 * '2'：进行中（陪玩方已经接受，正在服务中）
				 * '3'：已服务（陪玩方完成服务，等待买方用户确定已服务）
				 * '4'：已取消（陪玩方超时处理或拒绝、买方用户取消订单）
				 * '5'：已完成（买方用户确定已服务）
				 * 'n'：已删除（买方删除订单）
				 */
				this.goods = []; // 置空列表,显示加载进度条
				this.mescroll.resetUpScroll();

				this.getOrder(this.pTabNum, e);

			},
			getOrder(pNum, subNum) {
				let data;
				//（一）我的服务
				if (pNum == 1) {
					//为data数据中的status赋值，明确需要从后台中查的是哪种状态的订单
					//(1)全部订单
					if (subNum == 0) {
						data = {
							"userId": this.userId,
							"page": this.page.num
						};
						this.subTabNum = 0;
					}
					//(2)新订单（我的服务）或 待接受（服务我的）
					else if (subNum == 1) {
						data = {
							"userId": this.userId,
							"page": this.page.num,
							"status": ["1"] //来自后台的Order的status属性约定
						};
						this.subTabNum = 1;
					}
					//(3)进行中
					else if (subNum == 2) {
						data = {
							"userId": this.userId,
							"page": this.page.num,
							"status": ["2"] //来自后台的Order的status属性约定
						};
						this.subTabNum = 2;
					}
					//(4)已服务（我的服务） 或 已完成（服务我的）
					else if (subNum == 3) {
						data = {
							"userId": this.userId,
							"page": this.page.num,
							"status": ["3"] //来自后台的Order的status属性约定
						};
						this.subTabNum = 3;
					}

					// 发送请求
					console.log('开始发送陪玩订单请求');
					console.log("status:" + status);
					console.log(subNum);
					console.log(data)
					this.$myRequest({
						url: "/order/getPwOrder",
						method: "post",
						data: data
					}).then(r => {
						console.log(r);
						this.goods = r.data.data.data;
						this.page = {
							num: r.data.data.currPage,
							size: r.data.data.pageSize
						};
						console.log(this.goods);
					})
				}
				//(二) 服务我的
				else {
					//(1)全部订单
					if (subNum == 0) {
						data = {
							"userId": this.userId,
							"page": this.page.num
						};
						this.subTabNum = 0;
					}
					//(2)待接受
					else if (subNum == 1) {
						data = {
							"userId": this.userId,
							"page": this.page.num,
							"status": ["1"] //来自后台的Order的status属性约定
						};
						this.subTabNum = 1;
					}
					//(3)进行中
					else if (subNum == 2) {
						data = {
							"userId": this.userId,
							"page": this.page.num,
							"status": ["2"] //来自后台的Order的status属性约定
						};
						this.subTabNum = 2;
					}
					//(4)已完成
					else if (subNum == 3) {
						data = {
							"userId": this.userId,
							"page": this.page.num,
							"status": ["3", "5"] //来自后台的Order的status属性约定
						};
						this.subTabNum = 3;
					}

					// 发送请求
					console.log('开始发送普通用户订单请求');
					console.log("status:" + status);
					console.log(subNum);
					console.log(data)
					this.$myRequest({
						url: "/order/getUserOrder",
						method: "post",
						data: data
					}).then(r => {
						console.log(r);
						this.goods = r.data.data.data;
						this.page = {
							num: r.data.data.currPage,
							size: r.data.data.pageSize
						}
						console.log(this.goods);
					})
				}
			},
			gotoComment(id){
				console.log(id);
				uni.navigateTo({
					url:"/my/comment/comment?id="+id,
				})
			},
			confirmOrder(id) {
				this.$myRequest({
					url: "/order/confirm/" + id,
					method: "post",
					data: {}
				}).then(r => {
					if (r.data.code == "200") {
						this.getOrder(this.pTabNum, this.subTabNum);
						uni.showToast({
							title: '确认订单成功',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'success',
							//显示持续时间为 2秒
							duration: 2000
						})

					} else {
						uni.showToast({
							title: '确认订单失败！',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'fail',
							//显示持续时间为 2秒
							duration: 2000
						})
					}

				})
			},

			acceptOrder(id) {
				this.$myRequest({
					url: "/order/accept/" + id,
					method: "post",
					data: {}
				}).then(r => {
					if (r.data.code == "200") {
						this.getOrder(this.pTabNum, this.subTabNum);
						uni.showToast({
							title: '接受订单成功',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'success',
							//显示持续时间为 2秒
							duration: 2000
						})

					} else {
						uni.showToast({
							title: '接受订单失败！',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'fail',
							//显示持续时间为 2秒
							duration: 2000
						})
					}

				})
			},
			refuseOrder(id) {
				this.$myRequest({
					url: "/order/refuse/" + id,
					method: "post",
					data: {}
				}).then(r => {
					if (r.data.code == "200") {
						this.getOrder(this.pTabNum, this.subTabNum);
						uni.showToast({
							title: '拒绝订单成功',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'success',
							//显示持续时间为 2秒
							duration: 2000
						})

					} else {
						uni.showToast({
							title: '拒绝订单失败！',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'fail',
							//显示持续时间为 2秒
							duration: 2000
						})
					}

				})
			},
			finishServe(id) {
				this.$myRequest({
					url: "/order/served/" + id,
					method: "post",
					data: {}
				}).then(r => {
					if (r.data.code == "200") {
						this.getOrder(this.pTabNum, this.subTabNum);
						uni.showToast({
							title: '确认完成服务成功',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'success',
							//显示持续时间为 2秒
							duration: 2000
						})

					} else {
						uni.showToast({
							title: '确认完成服务失败！',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'fail',
							//显示持续时间为 2秒
							duration: 2000
						})
					}

				})
			},

			//删除
			delDemand(e) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定删除吗?',
					success: function(res) {
						if (res.confirm) {
							let data = {
								helpOrderId: e.id
							}
							that.$Request.postT('/help/deleteHelpOrder', data).then(res => {
								uni.showToast({
									title: "删除成功"
								})
								that.mescroll.resetUpScroll()
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			// 完善需求
			edit(item) {
				uni.navigateTo({
					url: '/pages/order/release?type=hasEdit&id=' + item.id + '&content=' + item.content +
						'&site=' + item.site +
						'&phone=' + item.phone + '&deliveryTime=' + item.deliveryTime + '&classifyId=' +
						item
						.classifyId +
						'&classifyName=' + item.classifyName + '&userType=' + item.userType +
						'&commission=' +
						item
						.commission + '&image=' + item.image + '&address=' + item.address + '&latitude=' +
						item
						.latitude + '&longitude=' + item.longitude
				})
			},
			clickItem: function(options) {
				console.log('点击', options)
				let isShow = this.tabs[this.tabIndex].status == 4 ? '1' : '0'
				uni.navigateTo({
					url: '/pages/index/taskDetail?helpOrderId=' + options.id + '&isShow=' + isShow
				})
			},
			goNav(e) {
				uni.navigateTo({
					url: e
				})
			}
		}
	}
</script>

<style lang="scss">
	/*
	sticky生效条件：
	1、父元素不能overflow:hidden或者overflow:auto属性。(mescroll-body设置:sticky="true"即可, mescroll-uni本身没有设置overflow)
	2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
	3、父元素的高度不能低于sticky元素的高度
	4、sticky元素仅在其父元素内生效,所以父元素必须是 mescroll
	*/
	.sticky-tabs {
		z-index: 990;
		position: sticky;
		top: var(--window-top);
		// background-color: #fff;
	}

	// 使用mescroll-uni,则top为0
	.mescroll-uni,
	/deep/.mescroll-uni {
		.sticky-tabs {
			top: 0;
		}
	}

	.demo-tip {
		padding: 18upx;
		font-size: 24upx;
		text-align: center;
	}
</style>
